<template>
    <div v-if="props.modelValue" class="file-model-container">
        <el-icon class="close-icon" color="#FFFFFF" :size="30" @click="close"><CircleClose /></el-icon>
        <MaterialResPlayer
            :file-data="fileData"/>
    </div>
</template>

<script setup>
import { CircleClose } from '@element-plus/icons-vue';
import MaterialResPlayer from './material-res-player.vue';

const emit = defineEmits(['update:model-value']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    fileData: {
        type: Object,
        default: () => {}
    }
})

// 关闭弹窗
const close = () => {
    emit('update:model-value', false)
}
</script>

<style lang="scss" scoped>
.file-model-container {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    .close-icon {
        position: absolute;
        right: 30px;
        top: 30px;
        cursor: pointer;
        // color: #ffffff;
        // font-size: 20px;
        // font-weight: bold;
    }
}
</style>